<template>
  <div id="fixed">
    <div style="width: 50px;height: 50px" id="fixone" class="fixdiv" @mouseover="show">
      <a href="javascript:void(0);"><i class="el-icon-link" ></i></a>
      <div id="oneson" ref="oneson">
        <img src="../assets/img/11.jpg" style="width: 100px;margin-top: 10px;"><br/>
        <div style="margin-top: 10px;font-size: 15px;color: white">关注小程序</div>
        <div style="margin-top: 10px;font-size: 15px;color: white">学习更便捷</div>
      </div>
    </div>
    <div style="width: 50px;height: 50px" id="fixtwo" class="fixdiv" @mouseover="hide">
      <div id="twoson" ref="twoson" style="width: 210px;">
        <div style="background: white">
          <el-link :underline="false">
            <div style="height: 25px;margin-top: 10px;margin-left: 10px;">
              <div style="margin-top: 10px;font-size: 15px;float: left">客服：3155237748</div>
              <div style="float: right;margin-right: 30px;margin-top: 8px"><img src="../assets/img/qq.jpg" style="width: 25px;height:25px;"></div>
            </div>
          </el-link>
          <el-link :underline="false">
            <div style="height: 25px;margin-top: 10px;margin-left: 10px;">
              <div style="margin-top: 10px;font-size: 15px;float: left">客服：3155237748</div>
              <div style="float: right;margin-right: 30px;margin-top: 6px"><img src="../assets/img/qq.jpg" style="width: 25px;height:25px"></div>
            </div>
          </el-link>
        </div>
      </div>
      <a href="javascript:void(0);"><i class="el-icon-headset"></i></a>
    </div>
    <div style="width: 50px;height: 50px" id="fixthree" class="fixdiv">
      <a href="javascript:void(0);" @click="gotop"><i class="el-icon-arrow-up" ></i></a>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Fixed",
        methods:{
          hide(){
            this.$refs.oneson.style.display = "none";
          },
          show(){
            this.$refs.oneson.style.display = "block";
          },
          gotop(){
            window.scrollTo(0,0);
          }
        }
    }
</script>

<style scoped>
  #fixed{
    position:fixed;
    bottom: 10px;
    z-index:2;
    right: 10px;
    box-shadow: darkgrey 10px 10px 10px 10px ;
  }
  .fixdiv{
    background: #F1F1F1;
    margin-top: 2px ;
    text-align: center;
  }
  .fixdiv:hover,.fixdiv:hover .el-icon-link,.fixdiv:hover .el-icon-headset,.fixdiv:hover .el-icon-arrow-up{
    color: white;
    background: #107BC5;
  }
  .el-icon-link{
    font-size: 30px;
    color: black;
    margin-top: 10px;
  }
  .el-icon-headset{
    font-size: 30px;
    color: black;
    margin-top: 10px;
  }
  .el-icon-arrow-up{
    font-size: 30px;
    color: black;
    margin-top: 10px;
  }
  #oneson{
    font-size: 12px;float: left; position: fixed;right: 64px;bottom:115px;width: 120px;height: 180px;background: #107BC5;
  }
  #twoson{
    font-size: 12px; position: fixed;right: 50px;bottom:65px;height: 100px;z-index:-1;
    padding-right: 15px;
    display: none;
  }
  #fixtwo:hover #twoson{
    display: block;
  }
  #one:hover i #oneson{
    background: red;
    display: block;
  }
</style>
